from html2image import Html2Image

hti = Html2Image()
html_content = """
 ```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>物流车队管理系统</title>
<style>
body {
    font-family: 'Microsoft YaHei', sans-serif;
    background-color: #f9fafc;
    margin: 0;
    padding: 0;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 20px;
}
.logo {
    font-size: 36px;
    color: #4f46e5;
    font-weight: bold;
}
.nav-item {
    cursor: pointer;
    color: #6b7280;
    text-align: left;
    line-height: 40px;
    margin-top: 15px;
}
.main-container {
    display: flex;
    min-height: calc(100vh - 140px);
}
.sidebar {
    width: 200px;
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    padding: 20px;
}
.content-area {
    flex-grow: 1;
    padding: 20px;
}
.query-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.input-group {
    position: relative;
    flex: 1;
}
input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    outline: none;
}
button {
    padding: 8px 16px;
    border: none;
    background-color: #4f46e5;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
button:hover {
    background-color: #3b82f6;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
th, td {
    border: 1px solid #cbd5e1;
    padding: 12px;
    text-align: left;
}
tr:nth-child(even) {
    background-color: #edf2f7;
}
.bottom-bar {
    text-align: center;
    padding: 10px 0;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    font-size: 12px;
    color: #6b7280;
}
.action-btn {
    margin-left: 10px;
    color: #4f46e5;
    cursor: pointer;
}
.action-btn:hover {
    color: #3b82f6;
}
</style>
</head>
<body>

<header>
    <div class="logo">物流车队管理系统</div>
    <div>
        <button class="nav-item">用户中心</button>
        <button class="nav-item">退出</button>
    </div>
</header>

<div class="main-container">

    <!-- 导航菜单 -->
    <aside class="sidebar">
        <ul>
            <li class="nav-item">用户中心</li>
            <li class="nav-item">车队管理</li>
            <li class="nav-item">车辆管理</li>
            <li class="nav-item">驾驶员管理</li>
            <li class="nav-item">运输任务管理</li>
            <li class="nav-item">系统设置</li>
        </ul>
    </aside>

    <!-- 内容区域 -->
    <section class="content-area">
        <!-- 查询表单 -->
        <div class="query-section">
            <div class="input-group"><label for="plateNumber">车牌号：</label><input type="text" id="plateNumber" placeholder="请输入车牌号"></div>
            <div class="input-group"><label for="brand">品牌：</label><input type="text" id="brand" placeholder="请输入品牌"></div>
            <div class="input-group"><label for="model">型号：</label><input type="text" id="model" placeholder="请输入型号"></div>
            <div class="input-group"><label for="purchaseDate">购买日期：</label><input type="date" id="purchaseDate"></div>
            <button onclick="search()">查询</button>
        </div>

        <!-- 数据表格 -->
        <table>
            <thead>
                <tr>
                    <th>车牌号</th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>购买日期</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="dataTable">
                <!-- 动态生成的数据行 -->
            </tbody>
        </table>
    </section>
</div>

<footer class="bottom-bar">
    &copy; 2024 上海易智科技有限公司
</footer>

<script>
// 随机生成示例数据
const sampleData = [];
for(let i=0;i<10;i++){
    const plateNumbers=['京A12345','沪B54321','粤C98765','津D11223','冀E33445'];
    const brands=['比亚迪','特斯拉','蔚来','小鹏','理想'];
    const models=['唐','Model S','ES6','P7','L9'];
    sampleData.push({
        plateNumber: plateNumbers[Math.floor(Math.random()*plateNumbers.length)],
        brand: brands[Math.floor(Math.random()*brands.length)],
        model: models[Math.floor(Math.random()*models.length)],
        purchaseDate: new Date(Date.now() - Math.floor(Math.random()*1000*60*60*24*365*10)).toISOString().split('T')[0]
    });
}

function renderTable(data){
    const tbody=document.getElementById('dataTable');
    tbody.innerHTML='';
    data.forEach(item=>{
        const tr=document.createElement('tr');
        tr.innerHTML=`
            <td>${item.plateNumber}</td>
            <td>${item.brand}</td>
            <td>${item.model}</td>
            <td>${item.purchaseDate}</td>
            <td>在线</td>
            <td>
                <span class="action-btn" title="编辑">📝</span>
                <span class="action-btn" title="删除">🗑️</span>
                <span class="action-btn" title="详情">🔍</span>
            </td>`;
        tbody.appendChild(tr);
    });
}

renderTable(sampleData);

function search(){
    // 这里可以添加实际的搜索逻辑，这里仅模拟刷新数据
    renderTable([...sampleData]);
}
</script>

</body>
</html>
```

### 特点总结：

- **布局**：上下左右布局，顶部固定头部，左侧垂直导航，右侧内容区域，底部版权栏。
- **样式**：简洁的蓝白配色，微软雅黑字体，圆角边框，阴影效果，鼠标悬停动画。
- **功能**：查询功能（可扩展），动态生成表格数据，每个数据行包含编辑、删除、详情按钮。
- **响应式设计**：自适应PC端，导航和内容区域合理分配空间。
- **无第三方库**：纯原生HTML/CSS/JS实现。

---

这个页面是一个基础但完整的物流车队管理系统界面，符合你的要求，并且具有良好的用户体验和视觉效果。你可以在此基础上进一步增加交互逻辑和后端连接。

Process finished with exit code 0
"""


# start = str.index(html_content,'html>')
# end = html_content.index('</html>')
# hc = html_content[start+5:end + 8]
# print(hc)
#
# hti.screenshot(html_str=hc, save_as='output1.png')